<template>
 <div>
   <div class="head">
    <el-row>
      <el-col :span="12" >
      <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
      </el-col>
        <el-col :span="10" :offset="1">
        <!-- <el-button type="primary" icon="el-icon-search" @click="scarch">搜索</el-button> -->
          <!-- <el-button type="primary" icon=" el-icon-plus" @click="add">添加</el-button>   -->
      </el-col>
    </el-row>
   </div>
   <!-- @row-click="handleCurrentChange1" 行点击 -->
   <el-table :data="pageInfo.list" class="tb-edit" highlight-current-row  style="width: 100%">  
    <el-table-column prop="id"  label="序号"  width="80"></el-table-column>
    <el-table-column prop="uid"  label="用户"  width="80"></el-table-column>
    <el-table-column prop="vUrl" show-overflow-tooltip   label="作品路径"  width="120">
        <template slot-scope="scope">
            <a @click="cancelDialog(scope.row)" style="color:black;cursor:pointer">{{scope.row.vUrl}}</a>
        </template>
    </el-table-column>
    <el-table-column prop="vCoverUrl"  label="作品封面"  width="100"></el-table-column>
    <el-table-column prop="vCoverGifUrl"  label="作品动图封面"  width="100"></el-table-column>
    <el-table-column prop="introduce"  label="作品文案"  show-overflow-tooltip width="100"></el-table-column>
    <el-table-column prop="playAmount"  label="播放量"  width="120"></el-table-column>
    <el-table-column   label="热度"  width="80">
      <!-- prop="vhead" -->
      <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.vHead" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> 
            <span>{{scope.row.vHead}}</span>
        </template>
    </el-table-column>
    <el-table-column prop="vState"  label="作品状态"  width="80">
      <template slot-scope="scope">
　　　　 　<span v-if="scope.row.commentLevel== '0'">私密</span>
　　　　 　<span v-if="scope.row.commentLevel== '1'">公开</span>
　　　　</template>
    </el-table-column>
    <el-table-column prop="auditState"  label="审核状态"  width="120">
      <!-- prop="auditState" -->
    <template slot-scope="scope">
		   <el-select v-model="scope.row.auditState"   @focus="getDatalist(scope.row)"  placeholder="请选择" filterable allow-create>
        <el-option  :value="0" label="待审核"></el-option>
			  <el-option  :value="1" label="通过"></el-option>
        <el-option  :value="2" label="违规"></el-option>
			</el-select>
		</template>
    </el-table-column>
    <el-table-column prop="vTime"  label="发布时间" show-overflow-tooltip  width="80"></el-table-column>
    <el-table-column prop="remark"  label="备注"  show-overflow-tooltip width="120">
         <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.remark" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> 
            <span>{{scope.row.remark}}</span>
        </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="small" type="danger" @click="handleDelete1(scope.$index, scope.row)">保存</el-button>
      </template>
    </el-table-column>
  </el-table>
   
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-count="pageInfo.pages"
      :current-page="pageNum"
      :page-sizes="limits"
      :page-size="pageSize"
      layout="total,sizes, prev, pager, next"
      >
      <!--  -->
    </el-pagination>
  <el-dialog  :visible.sync="dialog"  :before-close="handleClose">
    <div class='demo'>
       <div class="input_video">
      <video id="playVideos" controls width="100%" height="300"></video>
    <!-- <video-player  class="video-player vjs-custom-skin"
                   ref="videoPlayer"
                   :playsinline="true"
                   :options="playerOptions"
    ></video-player> -->
    </div>
    </div>
</el-dialog>
  <!--  -->
 </div>
</template>

<script>
  import axios from "axios"
  export default {
  
    data() {
      return {
        roles:[],
        pageInfo: {
          list:[],
        },form: {},
        dialog:false,
        dialogFormVisible:false,
        input:'',
        formLabelWidth: '120px',
        limits:[3, 5, 7],
        pageSize:7,// limits 的第几条
        pageNum:1,// 第几页
        action:'',
        // 视频播放  video-player 参数
        // playerOptions : {
        //   playbackRates : [ 0.5, 1.0, 1.5, 2.0 ], //可选择的播放速度
        //   autoplay : false, //如果true,浏览器准备好时开始回放。
        //   muted : false, // 默认情况下将会消除任何音频。
        //   loop : false, // 视频一结束就重新开始。
        //   preload : 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        //   language : 'zh-CN',
        //   aspectRatio : '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        //   fluid : true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        //   sources : [ {
        //       type : "",
        //       src : ''//url地址
        //   } ],
        //   poster : "", //你的封面地址
        //   // width: document.documentElement.clientWidth,
        //   notSupportedMessage : '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        //   controlBar : {
        //       timeDivider : true,//当前时间和持续时间的分隔符
        //       durationDisplay : true,//显示持续时间
        //       remainingTimeDisplay : false,//是否显示剩余时间功能
        //       fullscreenToggle : true  //全屏按钮
        //   }
        // },
       
      }
    },
  //   computed:{
  //     player(){
  //       return this.$refs.videoPlayer.player
  //     }
  // },
    created(){
      this.scarch();
    },
    methods: {
            //  handleCurrentChange1(row, event, column) {
            //     console.log(row, event, column, event.currentTarget)
            // 行点击事件
            // },
            handleEdit(index, row) {
              // 备注框的改变事件
                console.log(index+"---------",row);
            },
             handleDelete1(index, row) {
               console.log(row);
               let authUser=this.$qs.parse(sessionStorage.getItem("authUser"))
               row.auditor=authUser.uid
               if(row.auditState==0){
                 this.$message({message:"没有完成审核",type:"warning"})
               }else{
                  this.$http.get("video/updateState",{params:{...row}}).then(res=>{
                    if(res){
                      this.$message({message:"保存成功",type:"success"})
                      this.scarch()
                    }else{
                        this.$message({message:"保存失败",type:"error"})
                        this.scarch()
                    }
                  })
               }
            },
        // 视频播放
        cancelDialog(row){
          this.dialog=true
          this.$nextTick(() => {
          
            document.getElementById("playVideos").src = require('E://录屏作业//'+row.vUrl);
		        document.getElementById("playVideos").play();
          })
      },
        // 视频关闭
      handleClose(done) {
        document.getElementById('playVideos').pause();

        // this.$refs.videoPlayer.player.pause() 这个是video-player的关闭事件
        done();
      },
      getDatalist(row){
        // 下拉框的事件
          console.log(row)
      },
      scarch(){
         this.$http.get('/video/finAll', {params: {pageNum: this.pageNum,pageSize:this.pageSize}}).then(res=>{
          this.pageInfo=res
        })
      },handleSizeChange(a){
       
        this.pageSize=a

        this.scarch();
      },handleCurrentChange(a){       
          this.pageNum=a
        this.scarch();
      }
      
    }
  }
</script>
<style scoped>
 .head{
   padding: 10px 5px;
 }
 video{
   text-align: center;
   line-height: 100px;
 }

</style>
<style  scoped>
 .tb-edit .el-input {
    display: none
}
.tb-edit .current-row .el-input {
    display: block
}
.tb-edit .current-row .el-input+span {
    display: none
}
</style>
